Instituto Federal de São Paulo (IFSP)
Campus Bragança Paulista/SP

Análise e Desenvolvimento de Sistemas (ADS)

5o. módulo
Profa. Ana Paula Müller Giancoli
paulagiancoli@ifsp.edu.br


AULA 04 - PROPRIEDADES CSS DE LAYOUT

Agenda

1. Document Object Model (DOM)

2. Box Model padrão do CSS

2.1. Propriedade box-sizing

/* Valor padrão */
#elemento {
    box-sizing: content-box;
}
#elemento {
    box-sizing: border-box;
}

Exemplos

2.1.1 box-sizing: border-box;

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aula04</title>
    <link href="https://fonts.googleapis.com/css2?family=Modak&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <h1> IFSP - Bragança Paulista  </h1>
  <div id="content">
    <div class="item">01</div>
    <div class="item">02</div>
    <div class="item">03</div>
    <div class="item">04</div>
  </div>
</body>
</html>
/* Arquivo css/estilo.css */  
/* propriedades css para formatação do identificador content */
#content {
  background-color: #2e86c1;  /* propriedade para cor de fundo */
  height: 600px;              /* propriedade para altura de conteúdo */
  width: 600px;               /* propriedade para largura de conteúdo */
  padding: 5px;               /* propriedade para espaçamento ao redor do conteúdo */
}

.item {
  width: 250px;               /* propriedade para largura do conteúdo */
  height: 100px;              /* propriedade para altura do conteúdo */
  box-sizing: border-box;     /* propriedade para tamanho do conteúdo */
  border: 2px solid red;      /* propriedade para borda do conteúdo */
  padding: 10px;              /* propriedade para espaçamento ao redor do conteúdo */
  margin: 10px;               /* propriedade para margens ao redor do conteúdo */
  color: #000;                /* propriedade para cores do texto do conteúdo */
  font-weight: bold;          /* propriedade para negrito do texto do conteúdo */
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);  /* propriedade para sombra do conteúdo */
  background-color: #fff;     /* propriedade para cor de fundo do conteúdo */
}

Saída:

Representação do CSS no Box Model de um elemento (class="item"):

2.1.2. box-sizing: content-box;

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aula04</title>
    <link href="https://fonts.googleapis.com/css2?family=Modak&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <h1> IFSP - Bragança Paulista  </h1>
  <div id="content">
    <div class="item">01</div>
    <div class="item">02</div>
    <div class="item">03</div>
    <div class="item">04</div>
  </div>
</body>
</html>
/* Arquivo css/estilo.css */  
/* propriedades css para formatação do identificador content */
#content {
  background-color: #2e86c1;  /* propriedade para cor de fundo */
  height: 600px;              /* propriedade para altura de conteúdo */
  width: 600px;               /* propriedade para largura de conteúdo */
  padding: 5px;               /* propriedade para espaçamento ao redor do conteúdo */
}

.item {
  width: 250px;               /* propriedade para largura do conteúdo */
  height: 100px;              /* propriedade para altura do conteúdo */
  box-sizing: content-box;     /* propriedade para tamanho do conteúdo */
  border: 2px solid red;      /* propriedade para borda do conteúdo */
  padding: 10px;              /* propriedade para espaçamento ao redor do conteúdo */
  margin: 10px;               /* propriedade para margens ao redor do conteúdo */
  color: #000;                /* propriedade para cores do texto do conteúdo */
  font-weight: bold;          /* propriedade para negrito do texto do conteúdo */
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);  /* propriedade para sombra do conteúdo */
  background-color: #fff;     /* propriedade para cor de fundo do conteúdo */
}

Saída:

Representação do CSS no Box Model de um elemento (class="item"):

Resumo Comparativo

2.1.1 border-box 2.1.2 content-box
box-sizing: border-box; width: 250px; height: 100px;
box-sizing: content-box; width: 250px; height: 100px;
Largura Final = 250px
Largura Final = 250px + 20px + 4px = 274px




3. Propriedades CSS de Layout

3.1. Propriedade Margin

/* Exemplo 1 */
#elemento {
    margin: top/bottom/right/left;
}
/* Exemplo 2 */
#elemento {
    margin: top/bottom right/left;
}
/* Exemplo 3 */
#elemento {
    margin: top right/left bottom;
}
/* Exemplo 4 */
#elemento {
    margin: top right bottom left;
}
Exemplo1 Exemplo2 Exemplo3 Exemplo4
margin: 10px; margin: 10px 8px; margin: 10px 8px 6px; margin: 10px 8px 6px 12px;

3.2. Propriedade Padding

/* Exemplo 1 */
#elemento {
    padding: top/bottom/right/left;
}
/* Exemplo 2 */
#elemento {
    padding: top/bottom right/left;
}
/* Exemplo 3 */
#elemento {
    padding: top right/left bottom;
}
/* Exemplo 4 */
#elemento {
    padding: top right bottom left;
}
Exemplo1 Exemplo2 Exemplo3 Exemplo4
padding: 10px; padding: 10px 8px; padding: 10px 8px 6px; padding: 10px 8px 6px 12px;

3.3. Propriedade Position (Atualmente está sendo pouco usado)

3.4. Propriedade Float (Atualmente está sendo pouco usado)

#elemento { 
    float: left;
}

Para limpar o float, utiliza-se clear.

<!-- Exemplo index.html sem float -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Float</title>
    <style>
      .tudo {
        background-color: #2e86c1;
        height: 600px;
        width: 600px;
        padding: 5px;
      }
      .menu, .conteudo {
        height: 100px;
        width: 250px;
        color: #000;
        font-weight: bold;
        box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
        background-color: #ffffff;
        margin: 10px;
      }
    </style>
</head>
<body>
  <div class="tudo">
      <div class="menu">Menu</div>
      <div class="conteudo">Conteúdo</div>
  </div>
</body>
</html>

Saída:

<!-- Exemplo index.html COM float -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Float</title>
    <style>
      .tudo {
        background-color: #2e86c1;
        height: 600px;
        width: 600px;
        padding: 5px;
      }
      .menu, .conteudo {
        height: 100px;
        width: 250px;
        color: #000;
        font-weight: bold;
        box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
        background-color: #ffffff;
        margin: 10px;
      }
/* Inclusão do FLOAT */
      .menu {
        float: left;
        width: 30%;
      }
      .conteudo {
        float: right;
        width: 60%;
      } 
    </style>
</head>
<body>
  <div class="tudo">
      <div class="menu">Menu</div>
      <div class="conteudo">Conteúdo</div>
  </div>
</body>
</html>

Saída:

3.5. Propriedade Visibility

/* Código omitido para facilitar a visualização da modificação */
.menu {
        float: left;
        width: 30%;
        visibility: hidden;
      }
/* Código omitido para facilitar a visualização da modificação */

Saída:

3.6. Propriedade Outline

Exemplo:

#elemento {
    outline: rgba(0, 0,107,.65) solid 5px;
}
/* Código omitido para facilitar a visualização da modificação */
.menu, .conteudo {
        height: 100px;
        width: 250px;
        color: #000;
        font-weight: bold;
        box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
        background-color: #ffffff;
        margin: 10px;
        outline: rgba(0, 0,107,.65) solid 5px;
}
/* Código omitido para facilitar a visualização da modificação */

Saída:

3.7. Propriedade Display

4. Propriedades CSS de Layout - Display com o valor Flex

FlexBox

<!-- Exemplo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Aula04</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <h1> IFSP - Bragança Paulista  </h1>
  <div id="content">
    <div class="item">01</div>
    <div class="item">02</div>
    <div class="item">03</div>
    <div class="item">04</div>
  </div>
</body>
</html>
/* Exemplo estilo.css */
#content {
  background-color: #2e86c1;
  height: 600px;  
  width: 600px;            
  padding: 5px;
}

.item {
  width: 100px; 
  height: 100px;  
  margin: 10px; 
  color: #000; 
  font-weight: bold; 
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5); 
  background-color: #fff;   
}

Saída:

4.1. Display: Flex

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade display: flex */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px;
  padding: 5px;
  display: flex;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

4.2. Flex-direction

flex-direction : row;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    display: flex;
    flex-direction: row;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

flex-direction : column;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    display: flex;
    flex-direction: column;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

flexdirection: row-reverse;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    display: flex;
    flex-direction: row-reverse;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

flexdirection: column-reverse;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    display: flex;
    flex-direction: column-reverse;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

4.3. Flex-wrap

#elemento { 
    flex-flow: flex-direction flex-wrap;
}

Exemplo1

flex-wrap: nowrap;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

Exemplo2

flex-wrap: wrap;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    flex-direction: row;
    flex-wrap: wrap;     /* Modificado de nowrap para wrap */
}
.item {
  width: 250px;          /* Modificado de 100px para 250px */
  height: 100px;
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

Saída:

Exemplo3

flex-wrap: wrap-reverse;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    flex-direction: row;
    flex-wrap: wrap-reverse;     /* Modificado de wrap para wrap-reverse */
}
.item {
  width: 250px;                  /* Modificado de 100px para 250px */
  height: 100px;
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

Saída:

Exemplo4:

flex-wrap: wrap-reverse;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    flex-direction: column-reverse;
    flex-wrap: wrap-reverse;     /* Modificado de wrap para wrap-reverse */
}
.item {
  width: 250px;                  /* Modificado de 100px para 250px */
  height: 100px;
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

Saída:

4.4. Justify-content

#elemento { 
    justify-content: flex-start;
}

Exemplo1:

justify-content: flex-start;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 900px;         /* modificado de 600px para 900px */
  padding: 5px;
  display: flex;
  flex-direction: row;  /* modificado para row */
  flex-wrap: wrap;      /* modificado para wrap */
  justify-content: flex-start;  /* inserido */
}

.item {
  width: 100px;         /* modificado de 250px para 100px */
  height: 100px;
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

Saída:

Exemplo2:

justify-content: flex-end;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 900px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: flex-end;  /* modificado de flex-start para flex-end */
}

/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

Exemplo3:

justify-content: space-around;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 900px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: space-around;  /* modificado de flex-end para space-around */
}

/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

Exemplo4:

justify-content: space-between;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 900px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: space-between;  /* modificado de space-around para space-between */
}

/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

4.5. Align-items

#elemento { 
    align-items: flex-start;
}

Exemplo1:

align-items: flex-start;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: flex-start;  
  align-items: flex-start;
}

/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

Exemplo2:

align-items: flex-end;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: flex-start;  
  align-items: flex-end;
}

/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

Exemplo3:

align-items: center;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: flex-start;  
  align-items: center;
}

/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

Exemplo4:

align-items: strech;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: flex-start;  
  align-items: strech;
}
.item {
  width: 100px;    /* height removido */
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

Saída:

Exemplo5:

align-items: baseline;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: flex-start;  
  align-items: baseline;
}
.item {
  width: 100px;    /* height removido */
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

Saída:

Existem outras propriedades, tal como align-content. Pesquise a respeito!

4.6. Order

.item:nth-child(1) { 
    order: 4; 
}
.item:nth-child(2) { 
    order: 3;
}
.item:nth-child(3) { 
    order: 1; 
}
.item:nth-child(4) { 
    order: 2; 
}

Importante:

display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px; /* modificado de 600px para 900px */
  padding: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

.item:nth-child(1) { 
    order: 4; 
}
.item:nth-child(2) { 
    order: 3;
}
.item:nth-child(3) { 
    order: 1; 
}
.item:nth-child(4) { 
    order: 2; 
}

Saída:

4.7. Flex-grow

4.8. Flex-shrink

4.9. Flex-basis

Exemplo1:

.item {
  /* width: 100px; removido */
  height: 100px; 
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
  flex-grow: 0;         /* inserido */
  flex-shrink: 1;       /* inserido */
  flex-basis: auto;     /* inserido */
}

.item:nth-child(1) { 
    order: 4; 
    flex-grow: 2;  /* inserido */
}
.item:nth-child(2) { 
    order: 3;
}
.item:nth-child(3) { 
    order: 1; 
}
.item:nth-child(4) { 
    order: 2; 
}

Saída:

Exemplo2:

.item {
  /* width: 100px; removido */
  height: 100px; 
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
  flex-grow: 0;         /* inserido */
  flex-shrink: 1;       /* inserido */
  flex-basis: 65px;     /* inserido */
}

.item:nth-child(1) { 
    order: 4; 
    flex-grow: 2;  /* inserido */
}
.item:nth-child(2) { 
    order: 3;
}
.item:nth-child(3) { 
    order: 1; 
}
.item:nth-child(4) { 
    order: 2; 
}

Saída:

Observação:

5. CSS-Grid

6. Lista de Tags CSS para Flexbox

Referências

Perguntas


ADS - HTML5, CSS3, JS - 5o. módulo.
Modelo e formato elaborado por profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2020.

</div> </div>